<template>
  <div class="m-main-holder">
    <!-- 持有人饼图 -->
    <main-holder-info :holderInfo="holderInfo" device="mobile"></main-holder-info>
    <!-- 表格部分 -->
    <el-table :data="HolderList" stripe style="width: 100%" class="data-table table-shadow">
      <el-table-column prop="rank" :label="$t('rank.rank')" width="110"></el-table-column>
      <el-table-column :label="$t('rank.adr')" min-width="235">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.address}`"
            class="light"
          >{{item.row.address|filterHash}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="fee" :label="$t('rank.num')" width="170">
        <template slot-scope="item">{{(item.row.total/100000000)|scienceNum}}</template>
      </el-table-column>
      <el-table-column :label="$t('rank.percent')" width="100">
        <template slot-scope="item">{{item.row.percent}} %</template>
      </el-table-column>
    </el-table>
    <!-- 底部分页 -->
    <div class="bottom-page flex-right">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.number"
        :pageSize="pages.size"
        :total="holderInfo.holders"
      ></page-container>
    </div>
  </div>
</template>

<script>
import MainHolderInfo from "./MainHolderInfo";
import PageContainer from "@/components/mobile/PageContainer.vue";
import HolderBase from "@/mixins/Holder/mainHolder.js";
export default {
  mixins: [HolderBase],
  components: {
    MainHolderInfo,
    PageContainer
  }
};
</script>

<style lang="scss">
.m-main-holder {
  padding: 10px 20px;
  .tag-box {
    margin-left: 10px;
    display: inline-block;
    padding: 0 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    background: #f47736;
    cursor: default;
  }
  .data-table {
    font-size: 12px;
    margin: 20px 0;
  }
  .el-table td:nth-of-type(1) .cell {
    padding-left: 20px;
  }
}
</style>